<template>
  <div>
    <el-form label-width="154px" :model="show">
      <el-row>
        <el-col :xl="6" :lg="8">
          <el-form-item class="lable_input" label="放款时间：">
            <el-date-picker
              v-model="show.loanTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              :disabled="true"
            >
            </el-date-picker> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8">
          <el-form-item class="lable_input" label="解除担保时间：">
            <el-date-picker
              v-model="show.loanRelieveTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              :disabled="true"
            >
            </el-date-picker></el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8"
          ><el-form-item class="lable_input" label="初始还款时间：">
            <el-date-picker
              v-model="show.loanRepaymentTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              :disabled="true"
            >
            </el-date-picker> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8">
          <el-form-item class="lable_input" label="月还款金额：">
            <el-input
              :disabled="true"
              v-model="show.loanRepaymentMoney"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8"
          ><el-form-item class="lable_input" label="当前逾期金额：">
            <el-input
              :disabled="true"
              v-model="show.loanOverdueMoney"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8"
          ><el-form-item  class="lable_input" label="当前逾期期数：">
            <el-input
              :disabled="true"
              v-model="show.loanOverdueMonth"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8"
          ><el-form-item  class="lable_input" label="更新时间：">
            <el-date-picker
              v-model="show.loanUpTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              :disabled="true"
            >
            </el-date-picker> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="历史逾期情况：">
            <el-input
              :disabled="true"
              v-model="show.loanOverdue"
              type="textarea"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="24"
          ><el-form-item label="历史逾期联系情况：">
            <el-input
              :disabled="true"
              v-model="show.loanOverdueContact"
              type="textarea"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="24"
          ><el-form-item label="贷后备注：">
            <el-input
              :disabled="true"
              v-model="show.loanPostscript"
              type="textarea"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-button type="primary" v-if="showUpLoansSuffix" @click="btnFun"
            >编 辑</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <!-- 添加编辑对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form label-width="154px" :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="放款时间：">
              <el-date-picker
                v-model="form.loanTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="解除担保时间：">
              <el-date-picker
                v-model="form.loanRelieveTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="借款人初始还款时间：">
              <el-date-picker
                v-model="form.loanRepaymentTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="借款人月还款金额：">
              <el-input
                v-model="form.loanRepaymentMoney"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="当前逾期金额：">
              <el-input
                v-model="form.loanOverdueMoney"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="当前逾期期数：">
              <el-input
                v-model="form.loanOverdueMonth"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="24">
            <el-form-item label="历史逾期情况：">
              <el-input
                v-model="form.loanOverdue"
                type="textarea"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="24"
            ><el-form-item label="历史逾期联系情况：">
              <el-input
                v-model="form.loanOverdueContact"
                type="textarea"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="24"
            ><el-form-item label="贷后备注：">
              <el-input
                v-model="form.loanPostscript"
                type="textarea"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getLoansSuffix, postLoansSuffix } from "../../assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "PostLoan",
  data() {
    return {
      show: {},
      form: {},
      dialogVisible: false,
      title: "贷后信息",
      orderNumber: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      golbalPermissions: []
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.orderNumber = sessionStorage.getItem("orderNumber");
    this.getList();
  },
  computed: {
    //待后信息编辑按钮
    showUpLoansSuffix: function() {
      return checkPermiss(
        "business:upForm:upLoansSuffix",
        this.golbalPermissions
      );
    }
  },
  methods: {
    //   获取贷后信息
    getList() {
      getLoansSuffix({ orderNumber: this.orderNumber }).then(res => {
        this.show = res.data;
      });
    },
    btnFun() {
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(this.show));
    },
    submit() {
      this.form.orderNumber = this.orderNumber;
      postLoansSuffix(this.form).then(res => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success"
          });
          this.getList();
          this.dialogVisible = false;
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style scoped type="less">
.el-date-editor.el-input{
  width: auto;
}
::v-deep .el-form-item__content {
  text-align: left;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
.lable_input ::v-deep .el-form-item__label,
.lable_input ::v-deep .el-form-item__content,
.lable_input ::v-deep .el-input__inner,
.lable_input ::v-deep .el-input__inner{
  height: 32px;
  line-height: 32px;
}
.lable_input ::v-deep.el-input__icon{
  line-height: 24px;
}
</style>
